.ui-graph-circle-wrapper {
	display: inline-block;
	overflow: hidden;
	position: relative;
	font-size: 0;
}

.ui-graph-circle-number {
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-light, 300);
	font-size: 72px;
	line-height: 72px;
	color: #333;
	margin: -3% 0 0 -4%;
	opacity: 0;
	transition: 1s;
	z-index: 9;
	-webkit-transform: translate(-50%,-50%) translateZ(0);
	transform: translate(-50%,-50%) translateZ(0);
	will-change: transform;
	transform-style: preserve-3d;
}

.ui-graph-circle-counter .ui-graph-circle-number {
	transition: none;
}

.ui-graph-font-sm .ui-graph-circle-number {
	font-size: 56px;
	line-height: 56px;
}

.ui-graph-circle-wrapper-animate .ui-graph-circle-number {
	opacity: 1;
}

.ui-graph-circle-number span {
	/*content: '%';*/
	position: absolute;
	right: -27px;
	bottom: 5px;
	color: #333;
	opacity: .3;
	font-size: 35px;
	line-height: 40px;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	transition: .5s;
}

.ui-graph-circle-number:empty:after {
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
}

.ui-graph-circle-counter .ui-graph-circle-number {
	margin: -3% 0 0 0;
	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
	font-weight: var(--ui-font-weight-regular, 400);
}

.ui-graph-circle-bar-bg {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s linear;
	stroke: #e0f5ff;
	stroke-width: 7px;
	fill: transparent;
	stroke-dasharray: 400%
}

.ui-graph-circle-bar-progress {
	opacity: .3;
	stroke-width: 7px;
	fill: transparent;
	stroke: #2fc6f6 !important;
	transition: 1s cubic-bezier(0.65, 0.07, 0.37, 1.05);
}

.ui-graph-circle-bar-without-animate .ui-graph-circle-bar-progress {
	transition: none;
}

.ui-graph-circle-bar-progress-green .ui-graph-circle-bar-progress {
	stroke: #47e4c2 !important;
}

.ui-graph-circle-bar-progress-white .ui-graph-circle-bar-progress {
	stroke: rgba(255, 255, 255, 0.81) !important;
}

.ui-graph-circle-waves-wrapper {
	position: absolute;
	overflow: hidden;
	top: 19px;
	left: 19px;
	right: 19px;
	bottom: 19px;
	z-index: 1;
	border-radius: 100%;
	background: #fff;
}

.ui-graph-circle-waves {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	opacity: 0;
	transition: 2.5s;
	transform: translateY(0);
}

.ui-graph-circle-wrapper-animate .ui-graph-circle-waves {
	opacity: 1;
}

/*.ui-graph-circle-waves:before {*/
/*	content: '';*/
/*	width: 275%;*/
/*	height: 203%;*/
/*	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22223%22%20height%3D%22329%22%20viewBox%3D%220%200%20223%20329%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22a%22%20x1%3D%2250%25%22%20x2%3D%2262.226%25%22%20y1%3D%220%25%22%20y2%3D%2281.169%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23B2E800%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%239CD100%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cpath%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M223%2C0.00779280808%20C217.861166%2C-0.0499158555%20212.594214%2C0.210321957%20207.164491%2C0.874294665%20C200.674683%2C1.66789967%20194.515966%2C2.91909047%20188.688341%2C4.62786707%20C174.665545%2C7.64336851%20152.219591%2C13.1712489%20136.587671%2C16.3604504%20C84.5440868%2C26.9783065%2048.130023%2C-1.03136545%204.4408921e-16%2C0.0294581108%20L0%2C317.841091%20C101.81663%2C330.589083%20161.14996%2C332.308719%20178%2C323%20C180.867706%2C321.41575%20183.704939%2C318.14587%20186.5117%2C313.19036%20C199.166751%2C313.42569%20211.329517%2C313.620189%20223%2C313.773856%20L223%2C0.00779280808%20Z%22%20opacity%3D%22.299%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;*/
/*	background-size: auto 100% !important;*/
/*	position: absolute;*/
/*	z-index: 9;*/
/*	top: 5%;*/
/*	left: -137%;*/
/*	animation: firstWave 3s linear infinite;*/
/*}*/

/*.ui-graph-circle-waves:after {*/
/*	content: '';*/
/*	width: 229%;*/
/*	height: 194%;*/
/*	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22186%22%20height%3D%22315%22%20viewBox%3D%220%200%20186%20315%22%3E%0A%20%20%3Cpath%20fill%3D%22%23B7EB81%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.06421555e-14%2C0.0400838041%20C4.39622143%2C-0.0997638145%208.95398057%2C0.120334563%2013.7151065%2C0.794768157%20C25.6799746%2C2.48964224%2036.3820041%2C6.20627783%2045.8211951%2C11.9446749%20C46.0186702%2C12.0502981%2046.2119193%2C12.1658503%2046.4008296%2C12.2917905%20C46.472636%2C12.3396614%2046.5444652%2C12.3872984%2046.6163155%2C12.4347028%20C47.063043%2C12.7137817%2047.5068989%2C12.9974581%2047.9478831%2C13.2857319%20C56.4601671%2C18.5547207%2065.0976862%2C20.6966357%2070.6445543%2C22.0075504%20C117.025591%2C32.9689761%20143.926178%2C-0.431333679%20186%2C0.00422621917%20L186%2C315%20L0%2C315%20L0%2C0.0400838041%20Z%22%20opacity%3D%22.455%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;*/
/*	background-size: auto 100% !important;*/
/*	position: absolute;*/
/*	top: 5%;*/
/*	left: -114%;*/
/*	animation: firstWave 3.5s linear infinite;*/
/*	animation-direction: reverse*/
/*}*/

.ui-graph-circle-waves-left {
	display: block;
	width: 275%;
	height: 203%;
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22223%22%20height%3D%22329%22%20viewBox%3D%220%200%20223%20329%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22a%22%20x1%3D%2250%25%22%20x2%3D%2262.226%25%22%20y1%3D%220%25%22%20y2%3D%2281.169%25%22%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23B2E800%22/%3E%0A%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%239CD100%22/%3E%0A%20%20%20%20%3C/linearGradient%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cpath%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M223%2C0.00779280808%20C217.861166%2C-0.0499158555%20212.594214%2C0.210321957%20207.164491%2C0.874294665%20C200.674683%2C1.66789967%20194.515966%2C2.91909047%20188.688341%2C4.62786707%20C174.665545%2C7.64336851%20152.219591%2C13.1712489%20136.587671%2C16.3604504%20C84.5440868%2C26.9783065%2048.130023%2C-1.03136545%204.4408921e-16%2C0.0294581108%20L0%2C317.841091%20C101.81663%2C330.589083%20161.14996%2C332.308719%20178%2C323%20C180.867706%2C321.41575%20183.704939%2C318.14587%20186.5117%2C313.19036%20C199.166751%2C313.42569%20211.329517%2C313.620189%20223%2C313.773856%20L223%2C0.00779280808%20Z%22%20opacity%3D%22.299%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;
	background-size: auto 100% !important;
	position: absolute;
	z-index: 9;
	top: 5%;
	left: -137%;
}

.ui-graph-circle-waves-right {
	display: block;
	width: 229%;
	height: 198%;
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22186%22%20height%3D%22315%22%20viewBox%3D%220%200%20186%20315%22%3E%0A%20%20%3Cpath%20fill%3D%22%23B7EB81%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.06421555e-14%2C0.0400838041%20C4.39622143%2C-0.0997638145%208.95398057%2C0.120334563%2013.7151065%2C0.794768157%20C25.6799746%2C2.48964224%2036.3820041%2C6.20627783%2045.8211951%2C11.9446749%20C46.0186702%2C12.0502981%2046.2119193%2C12.1658503%2046.4008296%2C12.2917905%20C46.472636%2C12.3396614%2046.5444652%2C12.3872984%2046.6163155%2C12.4347028%20C47.063043%2C12.7137817%2047.5068989%2C12.9974581%2047.9478831%2C13.2857319%20C56.4601671%2C18.5547207%2065.0976862%2C20.6966357%2070.6445543%2C22.0075504%20C117.025591%2C32.9689761%20143.926178%2C-0.431333679%20186%2C0.00422621917%20L186%2C315%20L0%2C315%20L0%2C0.0400838041%20Z%22%20opacity%3D%22.455%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;
	background-size: auto 100% !important;
	position: absolute;
	top: 5%;
	left: -114%;
}

.ui-graph-circle-colorful-sm .ui-graph-circle-waves-wrapper {
	top: 14px;
	left: 14px;
	right: 14px;
	bottom: 14px;
}

.ui-graph-circle-colorful-sm .ui-graph-circle-bar-bg,
.ui-graph-circle-colorful-sm .ui-graph-circle-bar-progress {
	stroke-width: 3px;
}

.ui-graph-circle-colorful-sm .ui-graph-circle-number {
	margin: -1% 0 0 -2%;
	font-size: 16px;
	line-height: 16px;
}

.ui-graph-circle-colorful-sm .ui-graph-circle-number span {
	display: none;
}

.ui-graph-circle-waves-blue .ui-graph-circle-waves-left {
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22223%22%20height%3D%22329%22%3E%3Cpath%20fill%3D%22%2355D0E0%22%20fill-rule%3D%22evenodd%22%20d%3D%22M223%20.008a119.071%20119.071%200%2000-15.836.866c-6.49.794-12.648%202.045-18.476%203.754-14.022%203.015-36.468%208.543-52.1%2011.732C84.544%2026.978%2048.13-1.03%200%20.03V317.84C101.817%20330.59%20161.15%20332.31%20178%20323c2.868-1.584%205.705-4.854%208.512-9.81%2012.655.236%2024.818.43%2036.488.584V.008z%22%20opacity%3D%22.32%22/%3E%3C/svg%3E');
}

.ui-graph-circle-waves-blue .ui-graph-circle-waves-right {
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22186%22%20height%3D%22315%22%20viewBox%3D%220%200%20186%20315%22%3E%0A%20%20%3Cpath%20fill%3D%22%2331CDFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.06421555e-14%2C0.0400838041%20C4.39622143%2C-0.0997638145%208.95398057%2C0.120334563%2013.7151065%2C0.794768157%20C25.6799746%2C2.48964224%2036.3820041%2C6.20627783%2045.8211951%2C11.9446749%20C46.0186702%2C12.0502981%2046.2119193%2C12.1658503%2046.4008296%2C12.2917905%20C46.472636%2C12.3396614%2046.5444652%2C12.3872984%2046.6163155%2C12.4347028%20C47.063043%2C12.7137817%2047.5068989%2C12.9974581%2047.9478831%2C13.2857319%20C56.4601671%2C18.5547207%2065.0976862%2C20.6966357%2070.6441043%2C22.0075504%20C117.025591%2C32.9689761%20143.926178%2C-0.431333679%20186%2C0.00422621917%20L186%2C315%20L0%2C315%20L0%2C0.0400838041%20Z%22%20opacity%3D%22.410%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;
}

.ui-graph-circle-waves-pale .ui-graph-circle-waves-wrapper {
	background-color: transparent;
}

.ui-graph-circle-waves-pale .ui-graph-circle-number {
	color: #fff;
}

.ui-graph-circle-waves-pale .ui-graph-circle-waves-left {
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22186%22%20height%3D%22315%22%20viewBox%3D%220%200%20186%20315%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.06421555e-14%2C0.0400838041%20C4.39622143%2C-0.0997638145%208.95398057%2C0.120334563%2013.7151065%2C0.794768157%20C25.6799746%2C2.48964224%2036.3820041%2C6.20627783%2045.8211951%2C11.9446749%20C46.0186702%2C12.0502981%2046.2119193%2C12.1658503%2046.4008296%2C12.2917905%20C46.472636%2C12.3396614%2046.5444652%2C12.3872984%2046.6163155%2C12.4347028%20C47.063043%2C12.7137817%2047.5068989%2C12.9974581%2047.9478831%2C13.2857319%20C56.4601671%2C18.5547207%2065.0976862%2C20.6966357%2070.6432043%2C22.0075504%20C117.025591%2C32.9689761%20143.926178%2C-0.431333679%20186%2C0.00422621917%20L186%2C315%20L0%2C315%20L0%2C0.0400838041%20Z%22%20opacity%3D%22.160%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;
}

.ui-graph-circle-waves-pale .ui-graph-circle-waves-right {
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22186%22%20height%3D%22315%22%20viewBox%3D%220%200%20186%20315%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M3.06421555e-14%2C0.0400838041%20C4.39622143%2C-0.0997638145%208.95398057%2C0.120334563%2013.7151065%2C0.794768157%20C25.6799746%2C2.48964224%2036.3820041%2C6.20627783%2045.8211951%2C11.9446749%20C46.0186702%2C12.0502981%2046.2119193%2C12.1658503%2046.4008296%2C12.2917905%20C46.472636%2C12.3396614%2046.5444652%2C12.3872984%2046.6163155%2C12.4347028%20C47.063043%2C12.7137817%2047.5068989%2C12.9974581%2047.9478831%2C13.2857319%20C56.4601671%2C18.5547207%2065.0976862%2C20.6966357%2070.6441043%2C22.0075504%20C117.025591%2C32.9689761%20143.926178%2C-0.431333679%20186%2C0.00422621917%20L186%2C315%20L0%2C315%20L0%2C0.0400838041%20Z%22%20opacity%3D%22.300%22/%3E%0A%3C/svg%3E%0A') center top repeat-x;
}

.ui-graph-circle-bar-stroke-width-10 .ui-graph-circle-bar-bg,
.ui-graph-circle-bar-stroke-width-10 .ui-graph-circle-bar-progress {
	stroke-width: 10px;
}

@keyframes firstWave {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	100% {
		-webkit-transform: translate(50%, 0);
		transform: translate(50%, 0);
	}
}

@-webkit-keyframes firstWave {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	100% {
		-webkit-transform: translate(50%, 0);
		transform: translate(50%, 0);
	}
}

.ui-graph-circle-bar-animate .ui-graph-circle-bar-progress {
	opacity: 1;
}
